<template>
    <div class="risk">
        <div class="add">
            <van-uploader :max-count="2" @oversize="onOversize" :after-read="afterRead">
                上传
            </van-uploader>
        </div>
        <van-list :finished="finished" v-model="loading">
            <van-cell v-for="(item, index) in list" :key="index">
                <van-row class="">
                    <van-col span="4" type="flex">
                        <eagle-image-preview class="mt-10" :images="item.Url">
                        </eagle-image-preview>
                    </van-col>
                    <van-col span="18" type="flex">
                        <van-field autosize="" type="textarea" v-model="item.Remarks" rows="3" placeholder="请输入图片说明"></van-field>
                    </van-col>
                    <van-col span="2" type="flex">
                        <div class="mt-10">
                            <div>
                                <van-icon name="arrow-up" @click="up(index)" />
                            </div>
                            <div>
                                <van-icon name="cross" @click="handleDelete(index)" />
                            </div>
                        </div>
                    </van-col>
                </van-row>
            </van-cell>
        </van-list>
        <div class="btns m-10">
            <van-button type="warning" class="delete-btn" @click="submit()">
                保存
            </van-button>
        </div>
    </div>
</template>

<script>
import { getFileList, savePhotos } from "@/api/sytech/sytechDangerCheckTask";
import { upload } from "@/api/common";
export default {
    data() {
        return {
            active: 0,
            value: "",
            list: [],
            selectKey: "",
            filter: {
                type: 1,
                ctCode: this.$route.query.ctCode,
            },
            baseUrl: process.env.VUE_APP_BASE_API,
            loading: false,
            finished: false,
        };
    },
    created() {
        this.getList();
    },
    methods: {
        getList() {
            this.loading = true;
            getFileList(this.filter).then((res) => {
                this.loading = false;
                this.finished = true;

                this.list = res.data;
            });
        },

        handleDelete(idx) {
            this.list.splice(idx, 1);
        },

        // 设备详情
        goDetail(item) {
            this.$router.push({
                path: "/SytechDangerCheckTaskEdit",
                query: { id: item.ID },
            });
        },
        /* 上移 */
        up(index) {
            if (this.list.length > 1 && index !== 0) {
                this.list = this.swapItems(this.list, index, index - 1);
            }
        },

        swapItems(arr, index1, index2) {
            arr[index1] = arr.splice(index2, 1, arr[index1])[0];
            return arr;
        },
        afterRead(file) {
            let params = new FormData(); //创建form对象
            params.append("file", file.file);
            upload(params)
                .then((res) => {
                    res.data.forEach((item) => {
                        this.list.push({
                            CTCode: this.$route.query.ctCode,
                            Url: item.FilePath,
                            Remarks: "",
                            Order: 0,
                        });
                        //this.imgs.push(item.FilePath);
                    });
                })
                .catch((err) => {
                    console.log("err", err);
                });
        },

        submit() {
            let params = [];

            this.list.map((item, index) => {
                params.push({
                    Url: item.Url,
                    Remarks: item.Remarks,
                });
                //   this.list[index].Order = index+1
            });

            savePhotos(params, { ctCode: this.$route.query.ctCode, type: 1 }).then(
                (res) => {
                    this.$toast.success("操作成功！");
                    this.$router.goRefresh();
                    // console.log('asdasdsad',res);
                }
            );

            //console.log('asdasd',this.list);
        },
    },
};
</script>

<style lang="less" scoped>
.all_dep {
    background-color: #ffffff;
}
.warn_item {
    margin: 10px;
    /*margin-bottom: 10px;*/
    // padding: 10px 0 10px 10px;
    border-radius: 5px;
    position: relative;
}
.warn_header {
    display: flex;
    justify-content: space-between;
    position: relative;
    margin-bottom: 10px;
    .warn_tag {
        position: absolute;
        right: 0;
        top: 0;
        border-radius: 26.64rem 0 0 26.64rem;
    }
}
.dep_sort {
    // display: flex;
    // flex-wrap: wrap;
    // margin-bottom: 5px;
    img {
        height: 15px;
        width: 15px;
        margin-right: 5px;
    }
}
.dep_btm {
    display: flex;
    justify-content: flex-end;
    .btm_item {
        display: flex;
        align-items: center;
        img {
            height: 15px;
            width: 15px;
            margin-right: 5px;
        }
    }
}

.bottom-btns {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    position: fixed;
    bottom: 20px;
    .submit-btn {
        width: 32%;
        height: 30px;
        font-size: 12px;
    }
    .delete-btn {
        width: 100%;
        height: 30px;
        font-size: 12px;
    }
}

.choose_btm {
    display: flex;
    width: 80%;
    align-items: center;
    justify-content: space-between;
    position: fixed;
    bottom: 0;
    background-color: #fff;

    .choose_confirm {
        width: 80%;
        height: 30px;
        font-size: 12px;
    }
}
</style>
